var chart;
$(document).ready(function() {
	$.getJSON('line.json', function(data) {
		chart = new Highcharts.Chart({
			chart : {
				renderTo : 'lineChartContainer',
				type : 'line',
				zoomType : 'xy'
			},
			title : {
				text : data.mainTitle
			},
			xAxis : {
				title : {
					enabled : true,
					text : data.xAxisTitle
				},
				startOnTick : true,
				endOnTick : true,
				showLastLabel : true
			},
			yAxis : {
				title : {
					text : data.yAxisTitle
				}
			},
			tooltip : {
				formatter : function() {
					return 'X: ' + this.x + ', Y: ' + this.y;
				}
			},
			// legend : {
			// layout : 'vertical',
			// align : 'left',
			// verticalAlign : 'top',
			// x : 100,
			// y : 70,
			// floating : true,
			// backgroundColor : '#FFFFFF',
			// borderWidth : 1
			// },
			legend : {
				layout : 'vertical',
				align : 'right',
				verticalAlign : 'top',
				x : -10,
				borderWidth : 1
			},

			plotOptions : {
				scatter : {
					marker : {
						radius : 5,
						states : {
							hover : {
								enabled : true,
								lineColor : 'rgb(100,100,100)'
							}
						}
					},
					states : {
						hover : {
							marker : {
								enabled : false
							}
						}
					}
				}
			},
			series : data.series
		});

	});
});